<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>地图展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        .info {
            z-index: 999;
            width: auto;
            min-width: 22rem;
            padding: .75rem 1.25rem;
            margin-left: 1.25rem;
            position: fixed;
            top: 1rem;
            background-color: #fff;
            border-radius: .25rem;
            font-size: 14px;
            color: #666;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=O3ec1roDLm7Xf5RcQdaTQkfFykOtasxq"></script>
</head>

<body>
    <div class="info">最新版GL地图命名空间为BMapGL, 可按住鼠标右键控制地图旋转、修改倾斜角度。</div>
    <div id="container"></div>
</body>

</html>
<script>
    var map = new BMapGL.Map('container'); // 创建Map实例
    var point = new BMapGL.Point(113.947764, 22.549248);
    //113.947764,22.549248
    map.centerAndZoom(point, 17); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

    // 创建点标记
    var marker1 = new BMapGL.Marker(point);

    // 在地图上添加点标记
    map.addOverlay(marker1);

    var opts = {
        width: 200,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title: "泽林科技总部", // 信息窗口标题
        message: "到这里和我一起学前端吧！"
    }
    var infoWindow = new BMapGL.InfoWindow("地址：广东深圳国人科技大厦", opts);  // 创建信息窗口对象 
    marker1.addEventListener("click", function () {
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    });


</script>